<template>
	<view class="home-wrap u-m-b-20">
		<base-nav-bar :backIconColor="'#333'" :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				预存积分
			</text>
		</base-nav-bar>
		<view class="content-box u-p-20 u-m-t-30 u-m-l-40 u-m-r-40">
			<!-- grid商家功能模块 -->
			<view class="u-flex u-flex-items-center u-flex-start u-flex-wrap">
				<u--form :model="form" ref="uForm" :labelPosition="'top'" style="width: 100%;" :labelStyle="{'margin-botttom':'10rpx'}">
					<u-form-item label="手机号" prop="phone" labelWidth="120">
						<u-input v-model="form.phone"  :disabled="true"/>
					</u-form-item>
					<u-form-item label="预存积分" prop="score" labelWidth="120">
						<u-input v-model="form.score"  :disabled="true"/>
					</u-form-item>
					<u-form-item label="支付凭证" prop="image" labelWidth="120">
						<view class="images-content">
							<image style="width: 100%;height: 100%;" v-for="(item,index) in form.image" :src="item" :key="index"></image>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
import { HTTP_IMG_URL } from '../../config/app.js'
import BaseNavBar from "../../components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			form: {
				phone: '',
				score:'',
				image:''
			},
		};
	},
	computed: {
		...mapGetters(['isLogin','userInfo']),
		
	},
	onPullDownRefresh() {
	
	},
	
	onShow() {
		
	},
	onHide() {
	},
	onLoad(options) {
		if(options){
			this.form.phone = options.tel;
			this.form.score = options.score
			if(options.images){
				let image =options.images.split(',');
				this.form.image = image;
				console.log(image,"====this.form.image",this.form.image)
			}
		}
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL
		},
		// 路由跳转
		jump(path, parmas) {
			uni.navigateTo({
				url: path,
				query: parmas
			});
		},
		submit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
.home-wrap {
	min-height: 100vh;
	background: #F6F6F8;
}
.kehu-item {
	border-radius: 20rpx;
	width: 100%;
	.swipers{
		width: 100%;
	}
}
.nickname{
	font-size: 34rpx;
	font-weight: bold;
}
.content-box{
	background: #FFFFFF;
	border-radius: 30rpx;
	min-height: 50vh;
	.pay-item{
		width: 25%;
	}
}
::v-deep .u-form{
	width: 100%;
}
.images-content{
	width: 100%;
	height: 300rpx;
	display: flex;
	border:1rpx solid #eee;
}
</style>
